import React, {PureComponent} from 'react';
import { Link } from 'dva/router';

import moment from 'moment';
import {Table, Alert, Tag, Badge, Avatar} from 'antd';
import styles from './index.less';

const statusMap = ['default', 'processing', 'success', 'error'];

class CategoryTable extends PureComponent {
    state = {
        selectedRowKeys: [],
        totalCallNo: 0,
    };

    componentWillReceiveProps(nextProps) {
        // clean state
        if (nextProps.selectedRows.length === 0) {
            this.setState({
                selectedRowKeys: [],
                totalCallNo: 0,
            });
        }
    }

    handleRowSelectChange = (selectedRowKeys, selectedRows) => {
        const totalCallNo = selectedRows.reduce((sum, val) => {
            return sum + parseFloat(val.callNo, 10);
        }, 0);

        if (this.props.onSelectRow) {
            this.props.onSelectRow(selectedRows);
        }

        this.setState({selectedRowKeys, totalCallNo});
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.props.onChange(pagination, filters, sorter);
    }

    cleanSelectedKeys = () => {
        this.handleRowSelectChange([], []);
    }

    render() {
        const {selectedRowKeys, totalCallNo} = this.state;
        const {data: {list, pagination}, loading} = this.props;

        const status = ['禁用', '正常'];

        const columns = [
            {
                title: 'ID',
                dataIndex: 'id',
            },
            {
                title: '分类名称',
                dataIndex: 'name',
            },
            {
                title: '上级分类',
                dataIndex: 'parent',
                render: (text, record) => {
                    return (
                      <Tag color="green">{text.name}</Tag>
                    );
                },
            },
            {
                title: '状态',
                dataIndex: 'status',
                filters: [
                    {
                        text: status[0],
                        value: 0,
                    },
                    {
                        text: status[1],
                        value: 1,
                    },
                ],
                render(val) {
                    return <Badge status={statusMap[val]} text={status[val]} />;
                },
            },
            {
                title: '注册时间',
                dataIndex: 'created_at',
                sorter: true,
                render: val => <span>{moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')}</span>,
            },
            {
                title: '操作',
                dataIndex: 'id',
                render: id => (
                  <p>
                    <Link to={`/manager/${id}`}>用户信息</Link>
                  </p>
                ),
            },
        ];

        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            current: pagination.current,
            pageSize: pagination.size,
            total: pagination.total,
        };

        const rowSelection = {
            selectedRowKeys,
            onChange: this.handleRowSelectChange,
            getCheckboxProps: record => ({
                disabled: record.disabled,
            }),
        };

        return (
          <div className={styles.standardTable}>
            <div className={styles.tableAlert}>
              <Alert
                message={(
                  <p>
                                已选择 <a style={{fontWeight: 600}}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                                <a onClick={this.cleanSelectedKeys} style={{marginLeft: 24}}>清空</a>
                  </p>
                        )}
                type="info"
                showIcon
              />
            </div>
            <Table
              loading={loading}
              rowKey={record => record.id}
              rowSelection={rowSelection}
              dataSource={list}
              columns={columns}
              pagination={paginationProps}
              onChange={this.handleTableChange}
            />
          </div>
        );
    }
}

export default CategoryTable;
